<template>
  <div class="goodsDetail">
    <div class="tableDetail">
      <div style="padding-bottom: 20px">
        <span class="color_494949 ft12 pr5">订单编码：</span>
        <el-input
          v-model="searchpono"
          class="w164 mr10"
          placeholder="请输入订单编码"
        />
        <el-button
          class="settingBtn mr10"
          type="primary"
          @click="WmsGetPageData"
        >
          查询
        </el-button>
      </div>
      <div v-if="WmsData.PONo">
        <el-row>
          <el-col :span="12">
            <div>
              <span class="color_494949 ft12 pr5">订单编号：</span>
              <span class="color_494949 ft12 pr5">{{ WmsData.PONo }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <span class="color_494949 ft12 pr5">仓库编号：</span>
              <span class="color_494949 ft12 pr5">{{ WmsData.Code }}</span>
            </div>
          </el-col>
          <el-col class="mt20" :span="12">
            <div>
              <span class="color_494949 ft12 pr5">订单名称：</span>
              <span class="color_494949 ft12 pr5">{{ WmsData.FullName }}</span>
            </div>
          </el-col>
          <el-col class="mt20" :span="12">
            <div>
              <span class="color_494949 ft12 pr5">仓库名称：</span>
              <span class="color_494949 ft12 pr5">{{ WmsData.WHName }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mt20">
        <el-scrollbar
          wrap-class="scrollbar-wrapper"
          wrap-style="overflow-y: auto;"
        >
          <el-table
            ref="multipleTable"
            border
            :data="WmsData.PurchaseOrderDetail"
            height="400"
            show-summary
            style="width: 900px"
          >
            <el-table-column label="批次号" prop="BatchNo" />
            <el-table-column label="物资编码" show-overflow-tooltip width="140">
              <template #default="{ row }">
                <div>{{ row.ItemCode }}</div>
              </template>
            </el-table-column>

            <el-table-column label="物资名称" show-overflow-tooltip width="140">
              <template #default="{ row }">
                <div>{{ row.ItemName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="单位" prop="Unit" width="80" />
            <el-table-column label="规格" width="80">
              <template #default="{ row }">
                <div>{{ row.ItemSepc }}</div>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="Qty" />
            <el-table-column label="金额" prop="Amt" />
          </el-table>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
  import { searchArrivalNoticeDetail } from '@/api/form'

  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: ['seachpono'],
    data() {
      return {
        WmsData: this.form, // 选择物资数据
        searchpono: '',
      }
    },
    watch: {
      form(val) {
        console.log(val)
        this.WmsData = val
        this.searchpono = ''
      },
    },
    methods: {
      async WmsGetPageData() {
        this.$emit('seachpono', this.searchpono)
        const params = {
          pono: this.searchpono,
        }
        const data = await searchArrivalNoticeDetail(params)
        if (data.Result.Code == '200') {
          this.WmsData = data.Result.Data.data
        } else {
          this.WmsData = {
            PurchaseOrderDetail: [],
          }
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    max-height: 600px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }

  .w164 {
    width: 164px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .w320 {
    width: 320px;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    display: inline-block;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
</style>
